<template>
  <div class="container-qr">
    <div class="container-qr-div">
      <img src="/static/imgs/qrImng.png" @longpress="handleLongPress">
      <div class="container-qr-message">扫码有惊喜哦</div>
    </div>

    <van-action-sheet
      :show="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    ></van-action-sheet>

  </div>
</template>

<script>
  import { saveImage } from "../../../utils/wxUtil";

  export default {
    name: "qrCode",
    data() {
      return {
        show: false,
        actions: [{ name: '保存到本地' }, { name: '选项二' }, { name: '选项三' }],
      }
    },
    methods: {
      /**
       * @author: @xusy
       * @date: 2020/12/11 17:44
       * @creed: 长按显示下载
       */
      handleLongPress(e) {
        console.log("长按");
        this.show = true
      },
      /**
       * @author: @xusy
       * @date: 2020/12/11 13:44
       * @creed: 保存图片到本地
       */
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        if (item.target.name === '保存到本地') {
          let srcUrl = 'https://ibd-avatar.oss-cn-beijing.aliyuncs.com/patientImg/16038524860009610014c97a6.jpg'
          saveImage(srcUrl)
        }
        this.show = false;
      },
      onCancel() {
        this.show = false;
        console.log('取消')
      },
    }
  }
</script>

<style scoped>
  .container-qr{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container-qr-div{
    background: #fff;
    width: 600rpx;
    height: 630rpx;
    border-radius: 20rpx;
    text-align: center;
    padding: 30rpx;
  }
  .container-qr-div img{
    width: 500rpx;
    height: 500rpx;
  }
  .container-qr-message{
    font-size: 30rpx;
    color: #BCBCBC;
    margin-top: 30rpx;
  }
</style>
